<template>
    <view>
        <!-- 抽屉栏 -->
        <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
            <!-- 表情 -->
            <swiper class="emoji-swiper" :class="{ hidden: hideEmoji }" indicator-dots="true" duration="150">
                <swiper-item v-for="(page, pid) in emojiList" :key="pid">
                    <view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">
                        <image :src="'/static/img/emoji/' + em.url" :lazy-load="true"/>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 更多功能 相册-拍照-红包 -->
            <view class="more-layer" :class="{ hidden: hideMore }">
                <view class="list">
                    <view class="box" @tap="chooseImage">
                        <view class="icon tupian2"></view>
                        <view class="tool_text">相册</view>
                    </view>

                    <view class="box" @tap="camera">
                        <view class="icon paizhao"></view>
                        <view class="tool_text">拍摄</view>
                    </view>
                    <!--
                    <view class="box" @tap="video">
                        <image :src="'/static/theme/default/onmessage/video.png'" :lazy-load="true"
                            style="width:60upx;height:55upx;"
                         />
                         <view class="tool_text">视频</view>
                    </view>
                     -->
                    <view class="box" @tap="sendRedEnvelopes">
                        <view class="icon hongbao"></view>
                        <view class="tool_text">红包</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'im-drawer',
        components: {},
        data() {
            return {
                inputOffsetBottom: 0, //键盘的高度
                viewOffsetBottom: 0, //视窗距离页面的距离
            };
        },
        props: {
            hideMore: {
                type: Boolean,
                default: true
            },
            hideEmoji: {
                type: Boolean,
                default: true
            },
            popupLayerClass: {
                type: String,
                default: ''
            },
            textMsg: {
                type: String,
                default: ''
            },
            emojiList: {
                type: Array,
                default: []
            }
        },
        methods: {
            sendMsg(index, textMsg) {
                this.$emit('sendMsg', index, textMsg);
            },
            sendRedEnvelopes() {
                this.$emit('sendRedEnvelopes');
            },
            redShow() {
                this.$emit('redShow', true);
            },
            weizhi() {
            },
            discard() {
                return false;
            },
            //拍摄视频发送
            video() {
                uni.chooseVideo({
                    success: res => {
                        let min = parseInt(res.size / 60),
                            sec = res.size % 100;
                        min = min < 10 ? '0' + min : min;
                        sec = sec < 10 ? '0' + sec : sec;
                        let msg = {url: res.tempFilePath, length: min + ':' + sec};
                        this.$emit('sendMsg', msg, 3);
                    }
                });
            },
            getImage(type) {
                //this.$emit('getImage', type);
                //选照片 or 拍照
                //this.hideDrawer();
                this.$emit('hideDrawer');
                uni.chooseImage({
                    sourceType: [type],
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    success: res => {
                        for (let i = 0; i < res.tempFilePaths.length; i++) {
                            uni.getImageInfo({
                                src: res.tempFilePaths[i],
                                success: image => {
                                    let msg = {url: res.tempFilePaths[i], w: image.width, h: image.height};
                                    this.$emit('sendMsg', msg, 2);
                                }
                            });
                        }
                    }
                });
            },
            // 选择图片发送
            chooseImage() {
                this.getImage('album');
            },
            //拍照发送
            camera() {
                this.getImage('camera');
            },
            //添加表情
            addEmoji(em, del) {
                this.$emit('addEmoji', em, del);
            },
        }
    }
</script>

<style lang="scss">
    @import "@/static/css/chat/style.scss";
</style>
